<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${question.title}"></title>
    <head th:insert="~{import :: head}"></head>
    <head th:insert="~{import :: markdown}"></head>
</head>
<body>

<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main profile">
    <div class="row">
        <!--左边主要内容-->
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <!--正文-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="ProfileHeader-content">
                    <h4 class="question-title"><span th:text="${question.title}"></span></h4>
                    <span class="text-desc">
                        作者：<span th:text="${question.user.name}"></span> |
                        发布时间：<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span> |
                        阅读数： <span th:text="${question.viewCount}"></span>
                    </span>
                </div>
                <!--收藏-->
                <div class="ProfileHeader-button">
                    <button th:if="${session.user!=null}" th:data-id="${question.id}" class="Button FollowButton Button--primary" id="FollowButton" onclick="followButton(this)"
                            th:classappend="${question.like == true}?'Button--grey':'Button--blue'" icon="plus" type="button"><span th:text="${question.like == true}?'已收藏':'收藏'"></span></button>
                    <button th:data-id="${question.id}" class=" Button FollowButton Button--primary Button--blue" id="answerButton" onclick="onclick_go()"
                            icon="plus" type="button">回答</span></button>
                    <button th:if="${session.user!=null&&session.user.type==2}" th:data-id="${question.id}" class=" Button FollowButton Button--primary Button--red" id="deleteButton" onclick="deleteButton(this)"
                            icon="plus" type="button">删除</span></button>
                </div>

                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 top-header"
                     th:if="${!#lists.isEmpty(#httpServletRequest.getServletContext().getAttribute('HEADER'))}"
                     th:each="ad : ${#httpServletRequest.getServletContext().getAttribute('HEADER')}">
                    <a th:href="${ad.url}" th:text="${ad.title}" target="_blank"
                       style="color: #A00;font-weight: bold;"></a>
                    <img src="/image/hot"/>
                </div>

                <!--内容-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view">
                    <textarea style="display:none;" th:text="${question.description}"></textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        editormd.markdownToHTML("question-view", {});
                    });
                </script>

<!--                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"-->
<!--                     th:if="${!#lists.isEmpty(#httpServletRequest.getServletContext().getAttribute('FOOTER'))}"-->
<!--                     th:each="ad : ${#httpServletRequest.getServletContext().getAttribute('FOOTER')}">-->
<!--                    <a th:href="${ad.url}" th:text="${ad.title}" target="_blank"-->
<!--                       style="color: #A00;font-weight: bold;"></a>-->
<!--                </div>-->
<!--                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="width: 100%;"-->
<!--                     th:if="${#lists.isEmpty(#httpServletRequest.getServletContext().getAttribute('FOOTER'))}">-->
<!--                    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
<!--                    &lt;!&ndash; 页尾广告 &ndash;&gt;-->
<!--                    <ins class="adsbygoogle"-->
<!--                         style="display:block"-->
<!--                         data-ad-client="ca-pub-9804684553882114"-->
<!--                         data-ad-slot="4772323686"-->
<!--                         data-ad-format="auto"-->
<!--                         data-full-width-responsive="true"></ins>-->
<!--                    <script>-->
<!--                        (adsbygoogle = window.adsbygoogle || []).push({});-->
<!--                    </script>-->
<!--                </div>-->

                <!--标签-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <span class="question-tag" th:each="tag : ${question.tag.split(',')}">
                        <a th:href="@{/(page=1,tag=${tag})}"
                           th:text="${tag}" class="community-tag"></a>
                    </span>
                </div>

                <!--编辑-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <a th:href="@{'/publish/'+${question.id}}" class="community-menu"
                       th:if="${session.user != null && session.user.id == question.creator}">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                    </a>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>

            <!--回复-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>
                    <span th:text="${question.commentCount}"></span> 个回复
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment ,commenter: ${comments}">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded"
                                     th:src="${'/image/'+comment.user.avatarUrl}">
                            </a>
                        </div>
                        <div class="media-body" th:id="${'comment-body-'+comment.id}">
                            <h5 class="media-heading">
                                <span th:text="${comment.user.name}"></span>
                            </h5>
                            <!-- 评论内容 -->
                            <!--<div th:text="${comment.content}"></div>-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"  th:id="${'comment-view'+commenter.count}">
                                <textarea  style="display:none;" th:text="${comment.content}"></textarea>
                                <style th:onload="|javascript:markToHtml('${commenter.count}')|"></style>
                            </div>
                            <div class="menu">
                                <span th:data-id="${comment.id}"
                                      onclick="commentLike(this)" class="icon" th:classappend="${comment.like == true}?'active':''">
                                    <span class="glyphicon glyphicon-thumbs-up"></span>
                                    <span th:text="${comment.likeCount}"></span>
                                </span>

                                <span th:data-id="${comment.id}"
                                      onclick="collapseComments(this)" class="comment-icon">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    <span th:text="${comment.commentCount}"></span>
                                </span>
                                <span class="pull-right"
                                      th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd')}"></span>
                            </div>
                            <!--二级评论-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments"
                                 th:id="${'comment-'+comment.id}">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input type="text" class="form-control" placeholder="评论一下……"
                                           th:id="${'input-'+comment.id}">
                                    <button type="button" class="btn btn-success pull-right" onclick="comment(this)"
                                            th:data-id="${comment.id}">评论
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--回复输入框-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 id="comment_position">
                    提交回复
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded"
                                     th:src="${'/image/'+(session.user != null ? session.user.avatarUrl : 'default_head_image')}">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <span th:text="${session.user != null ? session.user.name : '匿名用户'}"></span>
                            </h5>
                        </div>
                    </div>
                    <div class="form-group" id="comment-editor">
                    <input type="hidden" id="question_id" th:value="${question.id}">
                    <!-- <textarea class="form-control comment" rows="6" id="comment_content"></textarea>-->
                    <textarea name="comment_content" id="comment_content" style="display:none;"
                              class="form-control"
                              cols="30"
                              rows="10"></textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        var editor = editormd("comment-editor", {
                            width: "100%",
                            height: 350,
                            path: "/js/lib/",
                            delay: 0,
                            //watch: false,
                            autoFocus : false,
                            placeholder: "请输入问题描述",
                            imageUpload: true,
                            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                            imageUploadURL: "/editorImage/upload",
                        });
                    });
                </script>
                    <button type="button" class="btn btn-success btn-comment" onclick="post()">回复</button>
                </div>
            </div>

        </div>

        <!--右边信息块-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>发起人</h4>
                <div class="media">
                    <div class="media-left">
                        <a th:href="${session.user!=null?'/profile/account/'+question.user.id:'#'}">
                            <img class="media-object img-rounded"
                                 th:src="${'/image/'+question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${question.user.name}"></span>
                        </h5>
                    </div>
                </div>
            </div>
            <div th:insert="~{notice :: notice}"></div>
<!--            <div th:insert="~{side :: side}"></div>-->
            <!--相关问题-->
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>相关问题</h4>
                <ul class="question-related">
                    <li th:each="related : ${relatedQuestions}">
                        <a th:href="@{'/question/'+ ${related.id}}" th:text="${related.title}"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
</body>
</html>
